<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../common/common.jspf"%>
<script type="text/javascript" src="${ctx}/js/advert/edit.js"></script>

<style type="text/css">
.col-sm-3 {
	width: 15%;
	float: left;
}

.col-sm-9 {
	width: 85%;
	float: left;
}

.img{
	width:200px;
	height:200px;
	margin-left: 18px;
}
</style>
</head>
<body>
	<div class="l_err" style="width: 100%; margin-top: 2px;"></div>
	<form id="form" name="form" class="form-horizontal" method="post" enctype="multipart/form-data"
		action="${ctx}/advert/saveAdvert.shtml">
		<input type="hidden" value="${advert.aId}" name="aId">
		<section class="panel panel-default">
		<div class="panel-body">
			<div class="form-group">
				<label class="col-sm-2 control-label" >广告名称</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" 
						placeholder="请输入广告名称" value="${advert.aName}"
						name="aName" id="aName">
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label" >广告链接</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" 
						placeholder="请输入广告链接" value="${advert.url}"
						name="url" id="url">
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">广告类型</label>
				<div class="col-sm-4">
					<select class="form-control m-b" name="type" id="type">
						<option value="0">--请选择广告类型--</option>
							<option value="1" <c:if test="${advert.type==1}">selected</c:if> >首页轮播图</option>
							<option value="2" <c:if test="${advert.type==2}">selected</c:if> >新品推荐</option>
							<option value="3" <c:if test="${advert.type==3}">selected</c:if> >热销产品</option>
							<option value="4" <c:if test="${advert.type==4}">selected</c:if> >特价产品</option>
						
					</select>
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">更改图片</label>
				<div class="col-sm-4">
					<input type="file" class="form-control" 
						name="uploadImg" id="uploadImg" onchange="setImagePreview();">
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
			 <label class="col-sm-2 control-label">广告图片</label>
			 	<div><img class="img" id="preview" src="${advert.img }"/></div>
			</div>
		</div>
		<footer class="panel-footer text-right bg-light lter">
			<button type="submit"  class="btn btn-success btn-s-xs" >提交</button>
		</footer> </section>
	</form>
	<script type="text/javascript">
		onloadurl();
		function setImagePreview() { 
			var docObj=document.getElementById("uploadImg"); 
			var imgObjPreview=document.getElementById("preview"); 
			if(docObj.files && docObj.files[0]){ 
				//火狐下，直接设img属性
			//	imgObjPreview.style.display = 'block'; 
				//imgObjPreview.style.width = '200px'; 
				//imgObjPreview.style.height = '200px'; 
				//imgObjPreview.style.margin-left='18px'; 
				//imgObjPreview.src = docObj.files[0].getAsDataURL(); 
				//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
				imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); 
			}else{ 
			//IE下，使用滤镜
				docObj.select(); 
				var imgSrc = document.selection.createRange().text; 
				var localImagId = document.getElementById("localImag"); 
				//必须设置初始大小
				localImagId.style.width = "300px"; 
				localImagId.style.height = "120px"; 
			//图片异常的捕捉，防止用户修改后缀来伪造图片
				try{ 
					localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 
					localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
				}catch(e){ 
					alert("您上传的图片格式不正确，请重新选择!"); 
					return false;  
				}
			}	
		}	
	</script>
</body>
</html>